/* 
1 页面初始化渲染
  1 页面一加载就显示百度地图
  2  添加比例尺和放大缩小控件
  3 让地图显示我的当前位置 
  4 如何描绘多个 区域的圆圈效果   有点难度 
    -1 接口返回数据 (肯定有经纬度数据)
      1 先把 "广州" 发送到后台  后台会返回  区域的id   (房源数据 只有 北京 上海 广州 深圳,有房源数据 )
      2 将区域的id 发送给后台 返回 这个城市对应的 区的房源信息
    -2 循环 房源数据 数组 生成 文字标签
       应用地图的覆盖物--demo:js2.0 添加文字标签  Label类； 
 2 点击圆圈 房源信息之后
  0 点击事件 
  1 清除旧的覆盖物   map.clearOverlays();
  2 重新定位 && 地图被放大
  3 加载被点击的房源数据     🚩
    然后同样步骤： 获取到房源数据-循环生成label标签-给label标签绑定点击事件-点击事件触发-
            -清除旧的覆盖物-重新定位 && 地图被放大- 加载被点击的房源数据  
         ===直到第3次 是显示房源详情数据【天河-珠江新城-珠江帝景（弹出详情）】
  4 封装根据区域id描绘覆盖物 的方法          
 */

import React, { Component } from "react"
import { NavBar, Icon } from 'antd-mobile'
import indexCss from './index.module.scss'
import { connect } from 'react-redux'
import { request } from "../../utils/request";

// 将地图实例 挂载到window
const BMap = window.BMap;
let map = null;
class Index extends Component {

    // 1 页面一加载就显示百度地图
    async componentDidMount() {
        // 创建地图实例  
        map = new BMap.Map("map_view");
        // console.log(map);  查看到map实例下的方法等等
        map.centerAndZoom(this.props.cityName);
        // 添加放大缩小（平移缩放）控件
        map.addControl(new BMap.NavigationControl());
        // 添加比例尺控件
        map.addControl(new BMap.ScaleControl());

        // 发送请求 获取区域id🚩  
        const res = await request.get('/area/info', { params: { name: this.props.cityName } })
        // console.log(res);
        const araeId = res.body.value;
        // 🚩调用自己封装的 描绘覆盖物 的方法
        this.drawOverlays(araeId)
    }

    //🚩  封装根据区域id描绘覆盖物 的方法
    drawOverlays = async (id) => {
        // 然后 再发送请求 获取房源数据
        const res2 = await request.get('/area/map', { params: { id } })
        // console.log(res2);
        const houseList = res2.body;   //请求回来的房源信息数据
        // console.log(houseList);

        // 覆盖物内容  地图中的添加文字标签
        // 循环 房源数据 数组 生成 文字标签
        houseList.forEach(item => {
            const point = new BMap.Point(item.coord.longitude, item.coord.latitude);
            map.centerAndZoom(point, 11);
            const opts = {
                position: point,    // 指定文本标注所在的地理位置
            }
            const label = new BMap.Label(`<div class="${indexCss.house_wrap}">
                <div class="${indexCss.house_label}">${item.label}</div>
                <div class="${indexCss.house_count}">${item.count}套</div>
            </div>`, opts);  // 创建文本标注对象
            label.setStyle({
                border: "none",       //要清除默认样式
                backgroundColor: "transparent"
            });
            // map.addOverlay(label);  //添加覆盖物控件

            // 1  给label绑定点击事件  宏任务 微任务   事件队列 
            label.addEventListener("click", () => {
                // console.log(item.label);
                // 2 清除所有覆盖物   在我的点击事件中来清除我自己 （报错：Cannot read property 'M' of null）
                setTimeout(() => {  // 原因 label也被清空了，最后点击了谁？？不明确 ，加延迟即可
                    map.clearOverlays();
                }, 0)
                // 3 放大地图--倍数不同
                // map.centerAndZoom(point, 13);
                // 4 根据区域id 获取下一级区域的房源信息-循环生成。。。
                const nextId = item.value;
                this.drawOverlays(nextId)  //🚩调用自己封装的 描绘覆盖物 的方法
            })
            map.addOverlay(label);  //添加覆盖物控件
        })

    }

    render() {
        return (
            <div>
                {/* 头部导航 */}
                <NavBar
                    mode="light"
                    icon={<Icon type="left" color="#23bb77" />}   //出现在最左边的图标占位符
                    onLeftClick={() => this.props.history.goBack()}
                    style={{ backgroundColor: "#f6f5f6" }}
                >地图找房{this.props.cityName}</NavBar>
                {/* 地图区域 */}
                <div className={indexCss.map} id="map_view">
                    地图区域
                </div>
            </div>
        )
    }

}

const mapStateToProps = (state) => ({
    cityName: state.mapReducer.cityName
})

const mapDispatchToProps = (dispatch) => ({

})
export default connect(mapStateToProps, mapDispatchToProps)(Index);